<template>
	<u-popup v-model="popupVisible" width="600rpx" mode="center" :mask-close-able="false" border-radius="14" @close="popupClose">
		<view>
			<view class="popup-title">基础信息</view>
			<u-cell-group :border="false">
				<u-cell-item :arrow="false">
					<view class="custom-cell-label required" slot="title">客户名称</view>
					<view class="custom-cell-val" slot="right-icon"><u-input v-model="receivingName" input-align="right" placeholder="请输入" :maxlength="20" trim></u-input></view>
				</u-cell-item>
				<u-cell-item :arrow="false">
					<view class="custom-cell-label required" slot="title">联系电话</view>
					<view class="custom-cell-val" slot="right-icon">
						<u-input v-model="receivingPhone" input-align="right" placeholder="请输入" :maxlength="11" type="number" trim></u-input>
					</view>
				</u-cell-item>
			</u-cell-group>
			<view class="popup-footer">
				<view class="btn-list am-flex-rc-center btn-cancel" @click="cancelHandle">取消</view>
				<view class="btn-list am-flex-rc-center btn-confirm" @click="submit">确认</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
import { apiUpdateCustomerAddress } from '@/api/customer';
export default {
	data() {
		return {
			receivingName: '',
			receivingPhone: '',
			// cellGroupTitleSty: {
			// 	background: '#FFFFFF',
			// 	color: '#333',
			// 	fontSize: '30rpx',
			// 	fontWeight: 500
			// },
			submitLoading: false,
			popupVisible: false,
			customerId: ''
		};
	},
	methods: {
		out_open(customerId, itemData) {
			this.customerId = customerId;
			this.receivingName = itemData.clientName;
			this.receivingPhone = itemData.clientPhone;
			this.popupVisible = true;
		},
		// 选择省change
		regionChange(e) {
			console.log(e.detail);
			this.receivingLocation = e.detail.value.join('-');
		},
		// 点击取消
		cancelHandle() {
			this.popupVisible = false;
		},
		submit() {
			if (this.submitLoading) return;
			if (!this.receivingName) {
				this.$am_toast('请输入客户名称');
				return;
			} else if (this.receivingPhone.length < 11) {
				this.$am_toast('联系电话格式不正确');
				return;
			}
			this.submitLoading = true;
			apiUpdateCustomerAddress({
				id: this.customerId,
				clientName: this.receivingName,
				clientPhone: this.receivingPhone
			})
				.then(res => {
					let { state, msg } = res.data;
					if (state === 'OK') {
						this.popupVisible = false;
						this.$am_toast.success('编辑成功！');
						this.$emit('success');
					} else {
						this.$am_toast.warning(msg);
					}
					this.submitLoading = false;
				})
				.catch(() => {
					this.$am_toast.error('操作失败，请重新尝试！');
					this.submitLoading = false;
				});
		},
		paramsInit() {
			this.customerId = '';
			this.receivingName = '';
			this.receivingPhone = '';
		},
		popupClose() {
			this.paramsInit();
		}
	}
};
</script>

<style lang="scss" scoped>
.custom-cell-label {
	font-size: 30rpx;
	color: #666;
	&.required {
		&::after {
			content: '*';
			color: red;
		}
	}
}
.custom-cell-val {
	width: 360rpx;
	font-size: 30rpx;
	color: #333;
}
.region-text {
	height: 40rpx;
	line-height: 40rpx;
	text-align: right;
	color: #333;
	&.empty {
		color: #ccc;
	}
}
.popup-title {
	padding-top: 39rpx;
	padding-bottom: 60rpx;
	font-size: 36rpx;
	font-weight: 400;
	color: #000000;
	text-align: center;
	border-bottom: 1px solid rgba(214, 215, 217, 0.3);
}
.popup-footer {
	display: flex;
	height: 99rpx;
	// border-top: 1px solid #ddd;
	align-items: stretch;
	.btn-list {
		flex: 1;
		font-size: 36rpx;
		font-weight: 400;
		& + .btn-list {
			border-left: 1px solid rgba(214, 215, 217, 0.3);
		}
	}
	.btn-cancel {
		color: #000000;
	}
	.btn-confirm {
		color: #4bb019;
	}
}
</style>
